<template>
  <div class="policy_list_page">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="策略名称" prop="strategyName">
        <el-input
          v-model="queryParams.strategyName"
          placeholder="请输入策略名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客群" prop="customerGroup">
        <el-select
          v-model="queryParams.customerGroup"
          placeholder="请选择客群"
          class="select_box"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in customerGroupList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道" prop="strategyChannelCode">
        <el-select
          v-model="queryParams.strategyChannelCode"
          placeholder="请选择渠道"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in channelList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构" prop="strategyOrganId">
        <el-cascader
          style="width: 100%"
          clearable
          @change="strategyOrganChange"
          :options="organizationList"
          :props="organizationList_props"
          v-model="strategyOrgan"
          :show-all-levels="false"
          placeholder="请选择组织机构"
        ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="openDetail('add')"
          >新建</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="policyListShow">
      <el-table-column label="Id" align="center">
        <template slot-scope="scope">
          <span class="strategy_id" @click="checkDetail(scope.row)">{{
            scope.row.strategyId
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="策略名称" align="center" prop="strategyName" />
      <el-table-column label="客群" align="center" prop="customerGroupName" />
      <el-table-column label="渠道" align="center" prop="strategyChannelName" />
      <el-table-column label="机构" align="center" prop="strategyOrganName" />
      <el-table-column
        label="描述"
        align="center"
        prop="strategyDescribe"
        width="300"
      />
      <el-table-column label="创建人" align="center" prop="insertUser" />

      <el-table-column
        label="创建时间"
        align="center"
        prop="insertTimeStr"
        width="180"
        sortable
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="openDetail('detail', scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="copyItem(scope.row)"
            >复制</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            v-show="scope.row.strategyExecuteType == 'hand'"
            @click="handleItem(scope.row)"
            >执行</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="delItem(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />
    <el-dialog
      v-loading="dialogLoading"
      title="策略统计详情"
      :visible.sync="open"
      width="680px"
      append-to-body
    >
      <div
        style="
          padding: 24px 0px 24px 0px;
          width: 500px;
          background-color: rgb(243, 243, 243);
          display: flex;
          align-items: center;
        "
      >
        <div
          style="
            width: 25%;
            border-right: 1px solid #dcdfe6;
            line-height: 24px;
            padding-left: 24px;
          "
        >
          <div>目标完成率</div>
          <div style="font-weight: 700; font-size: 16px">
            {{ detailTopData.targetCompletionRate }}%
          </div>
        </div>
        <div
          style="
            width: 25%;
            border-right: 1px solid #dcdfe6;
            line-height: 24px;
            padding-left: 24px;
          "
        >
          <div>累计进入</div>
          <div style="font-weight: 700; font-size: 16px">
            {{ detailTopData.accumulatedEntry }}%
          </div>
        </div>
        <div
          style="
            width: 25%;
            border-right: 1px solid #dcdfe6;
            line-height: 24px;
            padding-left: 24px;
          "
        >
          <div>累计触发</div>
          <div style="font-weight: 700; font-size: 16px">
            {{ detailTopData.cumulativeTriggering }}%
          </div>
        </div>
        <div style="width: 25%; line-height: 24px; padding-left: 24px">
          <div>目标完成</div>
          <div style="font-weight: 700; font-size: 16px">
            {{ detailTopData.goalCompletion }}%
          </div>
        </div>
      </div>
      <div style="margin-top: 24px; font-weight: 700; font-size: 16px">
        策略执行趋势
        <div
          :key="myCharts"
          v-if="tableData.length != 0"
          id="main"
          style="width: 600px; height: 300px"
        ></div>
        <div
          v-else
          style="
            line-height: 60px;
            width: 100%;
            text-align: center;
            color: #909399;
            font-size: 14px;
            font-weight: 500;
          "
        >
          暂无数据
        </div>
      </div>
      <div class="tableDatacolumn">
        <el-table :data="tableData" style="width: 100%" :max-height="240">
          <el-table-column
            prop="nodeName"
            align="left"
            label="节点名称"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="burialPointName"
            align="left"
            label="埋点"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="targetCompletionRate"
            align="center"
            label="目标完成率"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.targetCompletionRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="triggerCount"
            align="center"
            label="触发人次"
          ></el-table-column>
          <el-table-column
            prop="targetCompletionCount"
            align="center"
            label="目标完成(人次)"
          ></el-table-column>
        </el-table>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button >取 消</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
// import { listPost, getPost, delPost, addPost, updatePost } from "@/api/policyConfiguration/index";
import axios from "axios";
import * as echarts from "echarts";
import {
  getQueryEnumList,
  getQueryStrategyRuleList,
  executeStrategyRule,
  deleteStrategyRule,
  checkStrategyRuleOpen,
  copyStrategyRule,
} from "../../api/strategy/index";
export default {
  name: "statisticsQuery",
  data() {
    return {
      customerGroupList: [],
      channelList: [],
      organizationList: [],
      organizationList_props: {
        multiple: false,
        label: "organName",
        value: "organCode",
        children: "childOrganList",
        checkStrictly: true,
      },
      // 遮罩层
      loading: false,
      dialogLoading: false,
      // 总条数
      total: 0,
      // 是否显示弹出层
      open: false,
      // 表格数据
      policyListShow: [],
      dataList: [],
      // 查询参数
      strategyOrgan: [],
      queryParams: {
        strategyOrganId: "",
      },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      myCharts: Math.random(),
      detailTopData: {
        targetCompletionRate: "", // 目标，
        accumulatedEntry: "", // 进
        cumulativeTriggering: "", //触发
        goalCompletion: "", // 完成
      },
    };
  },
  mounted() {},
  created() {
    this.getListEnumList();
    this.getList();
  },
  methods: {
    strategyOrganChange(val) {
      if (val.length !== 0) {
        this.queryParams.strategyOrganId = val[val.length - 1];
      } else {
        this.queryParams.strategyOrganId = "";
      }
    },
    async getListEnumList() {
      getQueryEnumList({}).then((response) => {
        if (response.enumList) {
          if (response.enumList.customerGroup) {
            this.customerGroupList = response.enumList.customerGroup;
          }
          if (response.enumList.channelType) {
            this.channelList = response.enumList.channelType;
          }
          if (response.enumList.organList) {
            this.organizationList = JSON.parse(response.enumList.organList);
          }
        }
      });
    },
    async getList() {
      getQueryStrategyRuleList(
        this.pageNum,
        this.pageSize,
        this.queryParams
      ).then((response) => {
        this.policyListShow = response.rows;
        this.dataList = response.rows;
        this.total = response.total;
      });
    },
    resetQuery() {
      this.queryParams = {
        name: undefined,
      };
      this.policyListShow = this.dataList;
      this.resetForm("form");
    },
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    //复制
    copyItem(row) {
      let params = { strategyId: row.strategyId || "" };
      copyStrategyRule(params).then((response) => {
        this.$modal.msgSuccess("复制成功");
        this.getList();
      });
    },
    // 执行
    handleItem(row) {
      this.$modal
        .confirm('确认要执行"' + row.strategyName + '"策略吗？')
        .then(async () => {
          let params = { strategyId: row.strategyId || "" };
          executeStrategyRule(params).then((response) => {
            this.$modal.msgSuccess("执行成功");
            this.getList();
          });
        })
        .catch(function () {
          this.$modal.msgError("执行失败");
        });
    },
    delItem(row) {
      this.$modal
        .confirm('确定要删除"' + row.strategyName + '"策略吗？')
        .then(async () => {
          try {
            const response = await axios.post(
              process.env.VUE_APP_BASE_API + "/strategy/checkStrategyById",
              { strategyId: row.strategyId || "" }
            );
            if (response.data.code != "200") {
              this.$modal.msgError("当前策略有实际例正在执行，禁止删除");
              return;
            }
          } catch (error) {
            return;
          }
          let params = { strategyId: row.strategyId || "" };
          deleteStrategyRule(params).then((response) => {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          });
        })
        .catch(function () {
          this.$modal.msgError("删除失败");
        });
    },
    async checkDetail(row) {
      this.$router.push({
        path: "/policyFlowCanvas",
        query: {
          id: row.strategyId || "",
          type: "check",
        },
      });
    },

    async openDetail(type, row) {
      if (type != "add") {
        // let params = { strategyId: row.strategyId || "" };
        // const data = await checkStrategyRuleOpen(params).then((response) => {
        //   this.$modal.msgError("当前策略有实际例正在执行，禁止编辑");
        //   return;
        // });
        try {
          const response = await axios.post(
            process.env.VUE_APP_BASE_API + "/strategy/checkStrategyById",
            { strategyId: row.strategyId || "" }
          );
          if (response.data.code != "200") {
            this.$modal.msgError("当前策略有实际例正在执行，禁止编辑");
            return;
          }
        } catch (error) {
          return;
        }
      }
      if (type == "add") {
        this.$router.push({
          path: "/policyFlowCanvas",
        });
        return;
      }
      this.$router.push({
        path: "/policyFlowCanvas",
        query: {
          id: row.strategyId || "",
          type: "edit",
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.policy_list_page {
  padding: 32px;
  .head_title {
    font-size: 32px;
    font-weight: 600;
  }
  .search_head {
    width: 100%;
    background: #fff;
    height: 100px;
    margin-bottom: 32px;
    padding-left: 40px;
    .search_form {
      width: 100%;
      display: inline-flex;
    }
  }
}
.strategy_id {
  color: #009900;
}
</style>
